<template>
  <div class="home">
    <!-- 热销商品 -->
    <section class="section py-8">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">热销商品</h2>
      
      <div class="grid grid-cols-4 gap-8">
        <ProductCard 
          v-for="product in hotProducts" 
          :key="product.id" 
          :product="product"
        />
      </div>
    </section>
    
    <!-- 商品分类（Tab形式） -->
    <section class="section bg-gray-50">
      <div class="mb-10">
        <h2 class="text-3xl font-bold text-gray-800 mb-4">商品分类</h2>
        <p class="text-gray-600 max-w-3xl">轻松发现您需要的商品，邻居们随时在线提供优质产品</p>
      </div>
      <!-- Tab导航 -->
      <div class="flex gap-4 mb-8">
        <button 
          v-for="category in categories" 
          :key="category.id"
          :class="['category-badge', { active: activeTab === category.id }]"
          @click="switchTab(category.id)"
        >
          <i :class="category.icon"></i>
          {{ category.name }}
        </button>
      </div>
      <!-- Tab内容 -->
      <div v-for="category in categories" :key="category.id" :id="category.id" :class="['tab-content', { hidden: activeTab !== category.id }]">
        <div class="grid grid-cols-4 gap-8">
          <ProductCard 
            v-for="product in category.products" 
            :key="product.id" 
            :product="product"
          />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import ProductCard from '@/components/ProductCard/ProductCard.vue'

export default {
  name: 'HomePage',
  components: {
    ProductCard
  },
  data() {
    return {
      activeTab: 'tab-1',
      hotProducts: [
        {
          id: '1',
          name: '7号楼自制早餐套餐',
          description: '含现烤牛角包+咖啡，10点前下单',
          category: '热销中',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102073/aigp_1754518088.jpeg',
          url: '/product/1',
          price: '¥16.8'
        },
        {
          id: '2',
          name: '乐高星球大战套装',
          description: '完整未开封，适合10岁以上儿童',
          category: '9成新',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102074/aigp_1754518091.jpeg',
          url: '/product/2',
          price: '¥320'
        },
        {
          id: '3',
          name: '3号楼手工烘焙面包',
          description: '全麦面包+高纤贝果+葡萄干吐司',
          category: '现烤',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102075/aigp_1754518093.jpeg',
          url: '/product/3',
          price: '¥48'
        },
        {
          id: '4',
          name: '亲子绘本套装(10册)',
          description: '经典儿童读物，品相完好无缺页',
          category: '二手',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102076/aigp_1754518095.jpeg',
          url: '/product/4',
          price: '¥35'
        },
        {
          id: '5',
          name: '绿萝盆栽(含花盆)',
          description: '9号楼园艺居民供应，净化空气首选',
          category: '热销中',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102077/aigp_1754518097.jpeg',
          url: '/product/5',
          price: '¥22'
        },
        {
          id: '6',
          name: '北欧风单人沙发椅',
          description: '宜家原款，使用不到一年',
          category: '9成新',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102078/aigp_1754518099.jpeg',
          url: '/product/6',
          price: '¥180'
        },
        {
          id: '7',
          name: '小米手环8',
          description: '生日礼物多出一个，未拆封',
          category: '全新',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102079/aigp_1754518101.jpeg',
          url: '/product/7',
          price: '¥199'
        },
        {
          id: '8',
          name: '咖啡体验套餐',
          description: '咖啡豆+手冲设备体验，含教学',
          category: '手工制作',
          image: 'https://modao.cc/ai/uploads/ai_pics/10/102080/aigp_1754518103.jpeg',
          url: '/product/8',
          price: '¥88'
        }
      ],
      categories: [
        {
          id: 'tab-1',
          name: '早餐早点',
          icon: 'el-icon-food',
          products: [
            {
              id: 'breakfast-1',
              name: '7号楼自制早餐套餐',
              description: '含现烤牛角包+咖啡，10点前下单',
              category: '热销中',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102073/aigp_1754518088.jpeg',
              url: '/product/breakfast-1',
              price: '¥16.8'
            },
            {
              id: 'breakfast-2',
              name: '咖啡体验套餐',
              description: '咖啡豆+手冲设备体验，含教学',
              category: '手工制作',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102080/aigp_1754518103.jpeg',
              url: '/product/breakfast-2',
              price: '¥88'
            },
            {
              id: 'breakfast-3',
              name: '3号楼手工烘焙面包',
              description: '全麦面包+高纤贝果+葡萄干吐司',
              category: '现烤',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102075/aigp_1754518093.jpeg',
              url: '/product/breakfast-3',
              price: '¥48'
            }
          ]
        },
        {
          id: 'tab-2',
          name: '日用家居',
          icon: 'el-icon-sofa',
          products: [
            {
              id: 'home-1',
              name: '北欧风单人沙发椅',
              description: '宜家原款，使用不到一年',
              category: '9成新',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102078/aigp_1754518099.jpeg',
              url: '/product/home-1',
              price: '¥180'
            },
            {
              id: 'home-2',
              name: '绿萝盆栽(含花盆)',
              description: '9号楼园艺居民供应，净化空气首选',
              category: '热销中',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102077/aigp_1754518097.jpeg',
              url: '/product/home-2',
              price: '¥22'
            }
          ]
        },
        {
          id: 'tab-3',
          name: '二手玩具',
          icon: 'el-icon-toy',
          products: [
            {
              id: 'toy-1',
              name: '乐高星球大战套装',
              description: '完整未开封，适合10岁以上儿童',
              category: '9成新',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102074/aigp_1754518091.jpeg',
              url: '/product/toy-1',
              price: '¥320'
            }
          ]
        },
        {
          id: 'tab-4',
          name: '书籍文具',
          icon: 'el-icon-reading',
          products: [
            {
              id: 'book-1',
              name: '亲子绘本套装(10册)',
              description: '经典儿童读物，品相完好无缺页',
              category: '二手',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102076/aigp_1754518095.jpeg',
              url: '/product/book-1',
              price: '¥35'
            }
          ]
        },
        {
          id: 'tab-5',
          name: '花卉绿植',
          icon: 'el-icon-plant',
          products: [
            {
              id: 'plant-1',
              name: '绿萝盆栽(含花盆)',
              description: '9号楼园艺居民供应，净化空气首选',
              category: '热销中',
              image: 'https://modao.cc/ai/uploads/ai_pics/10/102077/aigp_1754518097.jpeg',
              url: '/product/plant-1',
              price: '¥22'
            }
          ]
        }
      ]
    }
  },
  methods: {
    switchTab(tabId) {
      this.activeTab = tabId
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #e5e7eb;
  min-height: 100vh;
}

.section {
  padding: 3rem 2.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.text-gray-800 {
  color: #1f2937;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-gray-600 {
  color: #4b5563;
}

.max-w-3xl {
  max-width: 48rem;
}

.flex {
  display: flex;
}

.gap-4 {
  gap: 1rem;
}

.category-badge {
  background-color: #f3f4f6;
  border-radius: 20px;
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  cursor: pointer;
  
  &:hover {
    background-color: #e5ffe5;
    color: #10b981;
  }
  
  &.active {
    background-color: #10b981;
    color: white;
  }
  
  i {
    font-size: 1.25rem;
  }
}

.tab-content {
  &.hidden {
    display: none;
  }
}

@media (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .section {
    padding: 2rem 1rem;
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
</style> 